//local mixins
@mixin theme-card-overlay() {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(map-get($map: $cdk-primary, $key: "primary-800"), 0.25);
}

@mixin card-width() {
  max-width: var(--#{$cdk}size-320);

  @include media-breakpoint-down(sm) {
    max-width: 100%;
  }
}

@mixin card-width-and-height() {
  height: var(--#{$cdk}size-240);
  @include card-width();
}

@mixin action-button {
  min-height: var(--#{$cdk}size-40);
  background-color: var(--#{$cdk}white);
}

@mixin theme-name-and-version() {
  font-size: var(--#{$cdk}size-16);
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  color: var(--#{$cdk}primary-800);
  text-align: center;
}

.theme-card {
  @include card-width-and-height();
  position: relative;
  overflow-y: hidden;

  .active-card-overlay {
    &.active {
      display: block;
    }
    display: none;
    @include theme-card-overlay();
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .actions-container {
    position: absolute;
    top: 80%;
    left: 50%;
    display: none;
    width: 100%;
    padding: var(--#{$cdk}size-8);
    text-align: center;
    transform: translate(-50%, -80%);

    &.active {
      display: block;
    }

    .action-button {
      @include action-button();
      font-style: normal;
      font-weight: 400;
      font-stretch: normal;
      line-height: normal;
      color: var(--#{$cdk}primary-700);
      text-align: center;

      .icon-current-theme {
        color: var(--#{$cdk}primary-800);
      }
    }

    .action-button:disabled {
      i,
      span {
        opacity: 0.5;
      }
    }

    .delete-button {
      @include action-button();
    }

    .action-button:not(:first-child):not(:disabled):hover {
      color: var(--#{$cdk}white);
      background-color: var(--#{$cdk}primary-800);
      box-shadow: var(--#{$cdk}box-shadow-md);
    }

    .delete-button:hover {
      color: var(--#{$cdk}white);
      background-color: var(--#{$cdk}red-500);
      box-shadow: var(--#{$cdk}box-shadow-md);
    }
  }
}

.theme-card-description {
  @include card-width();
}

.theme-name {
  font-weight: 700;
  @include theme-name-and-version();
}

.theme-version {
  @include theme-name-and-version();
}

.theme-author {
  padding-bottom: 1.6875rem;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  line-height: normal;
  color: #618596;
  text-align: center;
  letter-spacing: -0.01875rem;
}

.theme-catalog-card {
  background-color: #f8f8f8;

  .catalog-image {
    padding-top: 3.7rem;
  }

  .catalog-description {
    padding-top: 0.975rem;
  }
}

// actions
.theme-card:hover .active-card-overlay {
  display: block;
}

.theme-card:hover .actions-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--#{$cdk}size-8);
  justify-content: center;
}
